<template>
	<view class="container">
		<!-- 全屏音频背景图片 -->
		<image class="fullscreen-image" :src="currentAudio.img" mode="aspectFill">
		</image>

		<!-- 上一首按钮-->
		<image src="/static/image/icons/last_music.png" class="control-button last-music" @click="changeMusic(-1)">
		</image>

		<!-- 旋转图标 -->
		<view class="playing-icon">
			<image :src="currentAudio.img" class="rotate-icon" mode="aspectFill" />
		</view>


		<!-- 下一首按钮-->
		<image src="/static/image/icons/next_music.png" class="control-button next-music" @click="changeMusic(1)">
		</image>

		<!-- 音频播放器组件 -->
		<view class="audio-controls">
			<yz-audio ref="audioPlayer">
				<!-- 自定义按钮: 若不需要可删除 -->
				<template v-slot:extraCtrls>
					<uni-icons type="heart-filled" size="25" color="#fff"></uni-icons>
					<uni-icons type="cloud-download-filled" size="25" color="#fff"></uni-icons>
					<uni-icons fontFamily="CustomFont" :size="25" color="#fff" v-html="currentSpeedIcon"
						@click="playAudioByRate"></uni-icons>
				</template>
			</yz-audio>
		</view>


	</view>
</template>



<script>
//引入自定义的音频播放器组件
import yzAudio from '../../components/yz-audio/yz-audio.vue';

//引入音频数据
import {
	audioList
} from "../../commons/mock.js"

export default {
	components: {
		yzAudio //注册自定义组件
	},
	data() {
		return {
			audioList, //音频数据
			currentIndex: 0, //当前播放音频的索引
			// 定义变量isDoubleSpeed来追踪图标的点击状态
			isDoubleSpeed: false, // 追踪当前是否处于二倍速播放
			oneSpeedIcon: "&#xe9c8;", // 一倍速图标
			twoSpeedIcon: "&#xe9c9;" // 二倍速图标 
		}
	},
	computed: {
		currentAudio() {
			//计算属性，返回当前播放的音频对象
			return this.audioList[this.currentIndex];
		},
		//定义计算属性currentSpeedIcon
		currentSpeedIcon() {
			// 根据isIconClick的状态返回当前图标的HTML实体
			return this.isDoubleSpeed ? this.twoSpeedIcon : this.oneSpeedIcon;
		}
	},
	methods: {
		updateAudioPlayer() {
			// 更新音频播放器的内容，包括音频源、封面、歌手和名称
			const currentAudio = this.currentAudio;
			this.$refs.audioPlayer.setSrc(currentAudio.src);
			this.$refs.audioPlayer.setPoster(currentAudio.img);
			this.$refs.audioPlayer.setSinger(currentAudio.author);
			this.$refs.audioPlayer.setName(currentAudio.name);
		},
		// 翻页播放，通过计算当前索引并跟新音频播放器来实现歌曲的切换
		changeMusic(direction) {
			// 根据方向参数切换歌曲，direction为-1表示上一首，1表示下一首
			this.currentIndex = (this.currentIndex + direction + this.audioList.length) % this.audioList.length;
			this.updateAudioPlayer();
		},
		// 倍速播放，用于切换音频的播放速度
		playAudioByRate() {
			// 切换图标状态
			this.isDoubleSpeed = !this.isDoubleSpeed;
			// 设置音频播放速度
			this.$refs.audioPlayer.playbackRate(this.isDoubleSpeed ? 2 : 1);
		}
	},
	mounted() {
		// 组件挂载后，初始化音频播放器
		this.updateAudioPlayer();
	},
	onLoad(options) {
		// 检查 options.audioList 是否存在且为字符串
		if (options && typeof options.audioList === 'string') {
			// 获取上一个页面传递过来的音乐列表数据
			const audioListStr = options.audioList;
			// 赋值给当前页的音乐列表
			this.audioList = JSON.parse(decodeURIComponent(audioListStr));
		}
	}
};
</script>

<style lang="scss">
.container {
	width: 100%;
	height: 100vh; // 全屏高度
	position: relative; // 相对定位

	// 背景图片
	.fullscreen-image {
		width: 100%;
		height: 100%;
		// 确保替换元素的内容缩放并保持宽高比，以完全覆盖其框
		object-fit: cover;
		filter: blur(8px); // 模糊效果
	}

	// 翻页播放按钮
	.control-button {
		position: absolute; // 绝对定位
		top: 45%;
		width: 80rpx;
		height: 80rpx;

		&.last-music {
			left: 10%; // 上一首按钮位置
		}

		&.next-music {
			right: 10%; // 下一首按钮位置
		}
	}

	// 旋转图标定位
	.playing-icon {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 1;

		.rotate-icon {
			width: 200px;
			height: 200px;
			border-radius: 50%; // 圆形
			animation: spin 8s linear infinite; //使用旋转
		}
	}

	// 旋转动画
	@keyframes spin {
		from {
			transform: rotate(0deg); // 旋转开始角度
		}

		to {
			transform: rotate(360deg); // 旋转结束角度
		}
	}

	//播放器
	.audio-controls {
		position: absolute;
		bottom: 10px;
		left: 10px;
		right: 10px; //音频控制区域位置
	}
}

//引入字体库图标
@font-face {
	font-family: CustomFont;
	src: url('/static/iconfont.ttf');
}
</style>